import { useForm } from "../framework/common/context/metadata-context";
import eventBus, { useSubscribe } from "../framework/common/eventBus";
import TitleBar from "./TitleBar";
import CustomTitleBar from "./CustomTitleBar";
import Group from "./Group";
import useRuleTrigger from "../framework/common/lifecycle/useRuleTrigger";
import { diffStyle } from "../framework/common/utils/diffStyle";
import clsx from "clsx";
import "./index.css";
import { groupFilter } from "../framework/common/utils/filter";
import useWatermark from "./hooks/useWatermark";
import StatusIconWrap from "./StatusIconWrap";

import React, { useEffect } from "react";
import { InjectProvider } from "../framework/common/context/inject-context";
import useSqlValueTrigger from "../framework/common/lifecycle/useSqlValueTrigger";
import useFieldReloadTrigger from "../framework/common/lifecycle/useFieldReloadTrigger";
import { getPrintHideInfo, isIE } from "../framework/common/utils";
import OperationArea from "./OperationArea";
import { useUpdate} from 'ahooks'
import RelationProcess from "./RelationProcess1/RelationProcess1";
import ProcessBaseInfo from "../PrintPreview/ProcessBaseInfo";

export default React.memo(function RuntimeForm() {
  const form = useForm();
  const { data: tplData, urlPrefix, params,mode } = useForm().root;
  let isPrint=(mode==="Print")

  useWatermark(".runtime-form");
  useRuleTrigger(form.data);
  useSqlValueTrigger(form.data); //触发sql | api字段联动
  useFieldReloadTrigger(form.data); //注册字段reload订阅

  let update = useUpdate();
  //刷新打印页面状态
  useSubscribe("updatePrintView.update",()=>{
    update();
  },[])

  useSubscribe("signImage.updata", function (data) {
    if (data?.imageUrl) {
      tplData.ProfileSign.default_sign.image = data.imageUrl; //更新默认签章图片
    }
  }); //监听签章图片变化，因为签章出现的位置不固定，所以在主入口这里监听

  useEffect(() => {
    document.body.classList.add("w-100-important");
    return () => {
      document.body.classList.remove("w-100-important");
    };
  }, []);
  let formMetaData = form.data.form.form_meta_data;
  let formDataDefine = form.data.form.data_define; //包含字段在业务对象里面的信息
  let formStyleData = form.data.form.form_style_data; //表单通用样式

  //表单全局样式设置
  let fieldTitleStyle = formStyleData?.fieldTitleStyle; //字段lable样式
  let fieldClsName = diffStyle(fieldTitleStyle, "fieldTitleStyle"); //根据配置得到lable的className
  let fieldContentStyle = formStyleData?.fieldContentStyle; //字段value样式
  let fieldValueClsName = diffStyle(fieldContentStyle, "fieldContentStyle"); //根据配置得到value的className
  let groupStyle = formStyleData?.groupStyle; //分组标题样式
  let groupTitleClsName = diffStyle(groupStyle, "fieldContentStyle"); //根据配置得到value的className
  /*给form对象绑上计算好的全局样式*/
  form.fieldClsName = fieldClsName;
  form.fieldValueClsName = fieldValueClsName;
  form.groupTitleClsName = groupTitleClsName;
  form.subTableTheadRef = {}; //缓存子表的thead Dom对象
  form.showBorder = isPrint!==true?formMetaData.showBorder:true; //打印模式需要显示线框
  form.layoutType = isPrint!==true?formMetaData.layoutType:0; //紧凑模式 宽松模式 打印模式需要宽松模式

  return (
    <div className={clsx(isIE() ? "" : "overflow-hidden", form.showBorder && "showBorder")}>
      {/* 自定义表单标题区 */}
      <CustomTitleBar></CustomTitleBar>

      {/* 表单标题 */}
      <TitleBar titleStyle={formStyleData.formStyle} title={formMetaData.title} titleObj={formMetaData.titleObj}></TitleBar>

      {isPrint&&<ProcessBaseInfo des="打印界面，流程基础信息" />}

      {/* 急催超图标 */}
      <StatusIconWrap></StatusIconWrap>

      {/* 主表 | 主表内容 */}
      <div className="relative">
        {isPrint&&<OperationArea></OperationArea>}
        {isPrint&&<span className=" text-black font-bold">表单</span>}
        <GroupRenderer formMetaData={formMetaData}></GroupRenderer>

        {/*关联流程*/}
        {
          isPrint
          && <RelationProcess></RelationProcess>
        }
      </div>
    </div>
  );
});

function GroupRenderer({ formMetaData }) {
  const {data:tplData} = useForm();

  const update=useUpdate()
  
  useSubscribe("group.resetForm",()=>{

    tplData.hideInfo = getPrintHideInfo({
      tplData: tplData
    });

    tplData.hideTrackingInfo.forEach(item => {
      if(item.isHidden===true){
        item.isHidden=false
      }      
    });

    eventBus.publish("updatePrintView.update");//更新打印表单view
    update();//更新分组
  })
  return formMetaData.groups.filter(groupFilter).map((group, index) => (
    <InjectProvider key={index} value={{ group: group }}>
      <Group group={group}></Group>
    </InjectProvider>
  ));
}
